
08.04.2019, 18:39
|
 |
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 61
|
|
Синхронная работа. domtoimg.
Привет.
Я делаю из двух изображений одно. они лежат в диве. Я успешно конвертирую его в строку формата blob. Мне ее нужно передать через ajax, чтобы сохранить на сервере.
Проблема: мой скрипт не ждет пока сконвертируется картинка и летит вперед, отправляя тем самым пустую переменную.
Помогите сделать так, чтобы скрипт ждал выполнения конвертации div to img
Скрипт конвертации:
domtoimage.toBlob(document.getElementById('list_'+i))
.then(function(blob) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
GODFILE = reader.result + '';// переменная с blob строкой
}
});
// ajax запрос
|
|

08.04.2019, 19:53
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
domtoimage.toBlob(document.getElementById("list_" + i))
.then(function(blob) {
return new Promise(function(resolve) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
resolve(reader.result); // dataURL строка
}
});
}).then(function(dataURL) {
// POST запрос
});
Сообщение от finlolo
|
ajax запрос
|
такого нет, есть GET, POST, HEAD и пр.
|
|

08.04.2019, 20:47
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,013
|
|
Слегонца оффтоп, но тем не менее:
1) Зачем передавать на сервер dataURL, если проще, дешевле и быстрее передать сразу blob
2) Нафига вообще делать итоговую картинку на клиенте, если можно отправить на сервер адреса обеих картинок, и, возможно, их расположение/размеры?
|
|

08.04.2019, 21:13
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от Alexandroppolus
|
1) Зачем передавать на сервер dataURL, если проще, дешевле и быстрее передать сразу blob
|
Можно сразу вставить куда надо... на (кол-во картинок) запросов меньше
Сообщение от Alexandroppolus
|
2) Нафига вообще делать итоговую картинку на клиенте, если можно отправить на сервер адреса обеих картинок, и, возможно, их расположение/размеры?
|
Ну если это программа для обработки изображения, то она должна быть программой, а не «размазано по двум частям и меняем в семи местах»!
|
|

08.04.2019, 22:08
|
 |
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 61
|
|
Malleys,
он не видит, отправляет запрос, но dataUrl пустой
|
|

08.04.2019, 22:22
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от finlolo
|
он не видит, отправляет запрос, но dataUrl пустой
|
<img id="list_0" src="https://images.unsplash.com/photo-1552224613-b3c73ede511f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
var i = 0;
domtoimage.toBlob(document.getElementById("list_" + i))
.then(function(blob) {
return new Promise(function(resolve) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
resolve(reader.result); // dataURL строка
}
});
}).then(function(dataURL) {
// POST запрос
alert(dataURL);
});
</script>
Всё-таки работает, проверьте картинку
|
|

08.04.2019, 23:00
|
 |
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 61
|
|
Malleys,
спасибо. вроде заработало.
посоветуйте, как обработать данную строку на php.
|
|

09.04.2019, 02:45
|
 |
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 61
|
|
Malleys,
Все работает, круто. Спасибо.
Только у меня теперь есть небольшая проблемка:
У меня цикл перебирает все формы с такими картинками, если быть точным то цикл for. Трабл в том, что он переходит на следующий шаг не дожидаясь окончания текущей итерации, в итоге пока добавляется файл происходит киш-миш.
Вот так у меня выглядит примерно структурно код:
for (i = 0; i < airforms.length ; i++){
id = airforms[i].id.replace("form_", ""); //на этом моменте итерация перескакивает на другую
domtoimage.toBlob(document.getElementById("list_" + id))
.then(function(blob) {
return new Promise(function(resolve) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
resolve(reader.result); // dataURL строка
}
});
}).then(function(dataURL) {
//отправляю файл
//записываю данные с формы в массив объектов
//передаю массиву объектов ссылку на файл
//получается объект с данными формы и уже загруженным файлом, в этот момент уже фиг знает какая итерация идет (конечно, в зависимости от количества форм)
});
}
//передаю массив объектов на отправку сообщения. в итоге получается, что отправка делается, а массив пуст, так как еще не закончались загружаться файлы.
|
|

09.04.2019, 05:38
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от finlolo
|
У меня цикл перебирает все формы с такими картинками, если быть точным то цикл for. Trable в том, что он переходит на следующий шаг не дожидаясь окончания текущей итерации, в итоге пока добавляется файл происходит киш-миш.
|
Используйте async/await
<form id="form_0">
<img id="list_0" src="https://picsum.photos/800/800">
</form>
<form id="form_1">
<img id="list_1" src="https://picsum.photos/400/400">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
const airforms = document.querySelectorAll("form");
const urls = [];
(async () => {
for(const airform of airforms) {
const id = airform.id.replace("form_", "");
const blob = await domtoimage.toBlob(document.getElementById("list_" + id));
const formData = new FormData();
formData.append("file", blob);
const endPoint = "http://0.0.0.0:8080/image-upload.php";
// отправляю файл
const response = await fetch(endPoint, {
method: "POST",
body: formData
});
const result = await response.json();
//записываю данные с формы в массив объектов
//передаю массиву ссылку на файл
if("path" in result)
urls.push(new URL(result.path, endPoint));
}
// выводится массив с ссылками на уже загруженные файлы, после того как всё загрузилось
console.log(urls);
})();
</script>
Файлы отправляются POST запросом в http://0.0.0.0:8080/image-upload.php
Файл загружается в папку upload
Сообщение от finlolo
|
посоветуйте, как обработать данную строку на php.
|
Сообщение от finlolo
|
чтобы сохранить на сервере.
|
Может тогда всё-таки сохранять в виде файла...
Файл image-upload.php
<?php
define('KB', 1000);
define('MB', 1000 * KB);
define('GB', 1000 * MB);
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
$target_dir = "uploads/";
$imageFileType = $_FILES["file"]["type"];
$file_name = sha1_file($_FILES["file"]["tmp_name"]);
$extension = explode('/', $imageFileType)[1];
$target_file = $target_dir . 'image-' . $file_name . '.' . $extension;
$result['ok'] = true;
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["file"]["tmp_name"]);
if($check !== false) {
$result['message'][] = "File is an image - " . $check["mime"] . ".";
$result['ok'] = true;
} else {
$result['message'][] = "File is not an image.";
$result['ok'] = false;
}
}
// Check if file already exists
if (file_exists($target_file)) {
$result['message'][] = "Sorry, file already exists.";
$result['ok'] = false;
$result['path'] = $target_file;
}
// Check file size
if ($_FILES["file"]["size"] > 5 * MB) {
$result['message'][] = "Sorry, your file is too large.";
$result['ok'] = false;
}
// Allow certain file formats
if($extension != "jpg" && $extension != "png" && $extension != "jpeg"
&& $extension != "gif" ) {
$result['message'][] = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$result['ok'] = false;
}
// Check if $result['ok'] is set to false by an error
if ($result['ok'] == false) {
$result['message'][] = "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
$result['message'][] = "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
$result['path'] = $target_file;
} else {
$result['message'][] = "Sorry, there was an error uploading your file.";
$result['ok'] = false;
}
}
echo json_encode($result);
Последний раз редактировалось Malleys, 09.04.2019 в 05:55.
|
|
|
|